<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      div {
        box-sizing: border-box;
      }
      .finput {
        display: flex;
        padding: 0 20px;
      }

      .table {
        /* border: 1px solid red; */
        height: 90vh;
        /* width:  90vw; */
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-content: flex-start;
        padding: 0 20px;
      }

      .check {
        margin-left: 20px;
        display: inline-block;
        width: 8px;
        height: 16px;
        border-color: #009933;
        border-style: solid;
        border-width: 0 5px 5px 0;
        transform: rotate(45deg);
        visibility: hidden;
      }

      .t-item {
        display: flex;
        /* border: 1px solid red; */
        width: 20vw;
        flex-direction: column;
        padding: 10px;
      }

      .t-i-t {
        display: flex;
        font-size: 20px;
        font-weight: bold;
        margin: 0 0 10px 0;
      }

      .t-i-c {
        display: flex;
      }

      .t-i-title {
        margin: 0 20px 0 0;
      }
      .t-i-edit {
        cursor: pointer;
        visibility: hidden;
        /* visibility: visible; */
      }

      .t-i-con {
        cursor: pointer;
      }
      .t-i-con:hover {
        color: red;
      }
      .dia {
        width: 90vw;
        height: 80vh;
        background-color: #009933;
        opacity: 0.2;
        position: fixed;
        top: 0;
      }
    </style>
  </head>

  <body>
    <div class="finput">
      <input id="inputtitle" placeholder="请输入标题" type="text" />
      <input id="inputcon" placeholder="请输入要复制的内容" type="text" />
      <button id="btn" onclick="addArr()">确定</button>
      <button id="btn" onclick="showDel()">删除数据</button>
      <button id="btn" onclick="hideDel()">删除完成</button>
    </div>
    <div id="alltable" class="table">
      <div class="t-item">
  
      </div>
    </div>
  </body>
  <script>
    //创建元素
    function creatDiv(domStr, fDom, fDomClassName) {
      let newDiv = document.createElement("div");
      newDiv.innerHTML = domStr;
      newDiv.classList.add(fDomClassName);
      fDom.appendChild(newDiv);
    }
    //复制内容
    function copy(element) {
      let text = element.innerHTML;
      writeDataToClipboard(text);
      //显示复制完成的标记

      let checkDom = element.parentElement.lastElementChild;
      checkDom.style.visibility = "inherit";

      //显示对号后，1秒后消失
      setTimeout(() => {
        checkDom.style.visibility = "hidden";
      }, 1000);
    }
    //网页复制api
    async function writeDataToClipboard(text) {
      try {
        const result = await navigator.clipboard.writeText(text);
      } catch (error) {
        console.log(error);
        alert("复制失败");
      }
    }

    let fDomClassName = "t-item";
    let fDom = document.getElementById("alltable");

    //页面加载后
    window.onload = function () {
      console.log(document.readyState, "----页面加载完成-----");
      if (!localStorage.getItem("arr")) {
        localStorage.setItem("arr", JSON.stringify([]));
      }
      showArrAll();
    };

    //显示删除按钮
    function showDel(val) {
      let styleList = document.querySelectorAll("style");
      let styleListLength = styleList.length;
      if (styleListLength == 2) return;

      // 创建一个style元素
      let styleElement = document.createElement("style");
      // 设置style元素的内容（CSS规则）
      styleElement.textContent = `.t-i-edit { visibility: visible; }`;
      // 将style元素添加到<head>标签内
      document.head.appendChild(styleElement);
    }

    //隐藏删除按钮
    function hideDel() {
      let styleList = document.querySelectorAll("style");
      let styleListLength = styleList.length;

      if (styleListLength == 2) {
        styleList[1].remove();
      }
    }

    //显示所有数据
    function showArrAll() {
      getArr().forEach((item) => {
        let domStr = `
            <div class="t-i-t">
                <div class="t-i-title">${item.title}</div>
                <div class="t-i-edit" onclick="delArr(this)">删除</div>
            </div>
            <div class="t-i-c">
                <div class="t-i-con" onclick="copy(this)">${item.con}</div>
                <div class="check"></div>
            </div>
           `;
        creatDiv(domStr, fDom, fDomClassName);
      });
    }
    //页面追加一条数据
    function appendArr(info) {
      let domStr = `
            <div class="t-i-t">
                <div class="t-i-title">${info.title}</div>
                <div class="t-i-edit" onclick="delArr(this)">删除</div>
            </div>
            <div class="t-i-c">
                <div class="t-i-con" onclick="copy(this)">${info.con}</div>
                <div class="check"></div>
            </div>
           `;
      creatDiv(domStr, fDom, fDomClassName);
    }

    //添加页面数据
    function addArr() {
      let title = document.getElementById("inputtitle").value;
      let con = document.getElementById("inputcon").value;

      if (!title || !con) return alert("请输入内容");

      let info = {
        title: title,
        con: con,
      };

      let arrinfo = getArr();
      arrinfo.push(info);
      setArr(arrinfo);
      appendArr(info)
      document.getElementById("inputtitle").value = ''
      document.getElementById("inputcon").value = ''
    }
    // 删除数据
    function delArr(e){
      console.log(e);
      let itemdom = e.parentElement.parentElement
      let fdom = e.parentElement.parentElement.parentNode

      let children = fdom.children; 
      console.log(children);

      let index = Array.from(children).indexOf(itemdom);
      console.log(index);

      let arr = getArr()
      arr.splice(index-1, 1)
      setArr(arr)
      itemdom.remove()
    }

    //获取数据
    function getArr() {
      return JSON.parse(localStorage.getItem("arr"));
    }
    // 存储数据
    function setArr(array) {
      localStorage.setItem("arr", JSON.stringify(array));
    }
  </script>
</html>
